$(function() {
	$.getJSON('./reader', {
		'method' : 'getAllAlgs'
	}, function(data) {
		$("#alglist").append("<table width='100%' id='algs'>");
		// $("#algs").append("<tr><td
		// width='35%'>åº�å�·</td><td>ç®—æ³•å��ç§°</td></tr>");
		// add algorithm to table
		$.each(data, function(index, entry) {
			$("#algs").append(
					"<tr><td id='alg_id'>" + entry['id']
							+ "</td><td id='alg_name'>" + entry['name']
							+ "</td></tr>");
		});
		// add action to each row
		$("#algs tr").each(function() {
			var alg_id = $(this).children().filter("#alg_id").text();
			$(this).bind('click', function() {
				click_alg(alg_id);
			}).css('cursor', 'pointer');
		});
		$("#alglist").append("</table>");
	});

	// when the user clicks the algorithm, this function is triggered
	function click_alg(alg_id) {
		$.getJSON('./reader', {
			method : 'getAlgInfo',
			id : alg_id
		},
				function(data) {
					$("#algdesc").empty();
					$("#algdesc").append(
							'<strong>Description:</strong><br>'
									+ data['Description'] + "<br><br>");
					$("#algdesc").append(
							'<strong>Input:</strong><br>' + data['Input']
									+ "<br><br>");
					$("#algdesc").append(
							'<strong>Output:</strong><br>' + data['Output']
									+ "<br><br>");
				});

		$.getJSON('./reader', {
			method : 'getFeaturesByAlgID',
			id : alg_id
		}, function(data) {
			$("#featurelist").empty();
			$("#featuredesc").empty();
			$("#featurelist").append("<table width='100%' id='features'>");
			$.each(data, function(index, entry) {
				$("#features").append(
						"<tr><td id='feature_id'>" + entry + "</td></tr>");
			});
			$("#featurelist").append("</table>");

			$("#features tr").each(
					function() {
						var feature_id = $(this).children().filter(
								"#feature_id").text();
						$(this).bind('click', function() {
							click_feature(feature_id);
						}).css('cursor', 'pointer');
					});
		});
	}

	// when the user clicks the feature, this function is triggered
	function click_feature(feature_id) {
		$.getJSON('./reader', {
			method : 'getFeatureByID',
			id : feature_id
		}, function(data) {
			$("#featuredesc").empty();
			for ( var p in data) {
				if (typeof (data[p]) != "function") {
					$("#featuredesc").append(p + "=" + data[p] + "<br>");
				}
			}
		});
	}
});